/// <reference types="@nasl/types" />

namespace nasl.ui {
  @Component({
    title: '按钮',
    icon: 'button',
    description: '用于触发一个即时操作。',
    group: 'Display',
  })
  export class Button extends ViewComponent {
    constructor(options?: Partial<ButtonOptions>) {
      super();
    }
  }

  export class ButtonOptions extends ViewComponentOptions {
    // @Prop({
    //   title: '路由链接',
    //   description: '需要 vue-router，与`<router-link>`的`to`属性相同。可以是一个字符串或者是描述目标位置的对象。',
    // })
    // private to: nasl.core.String | Location;

    // @Prop({
    //   title: '替换',
    //   description: '需要 vue-router，与`<router-link>`的`replace`属性相同。如果为`true`，当点击时，会调用`router.replace()`而不是`router.push()`，于是导航后不会留下`history `记录。',
    //   setter: {
    //     concept: 'SwitchSetter',
    //   },
    // })
    // private replace: nasl.core.Boolean = false;

    // @Prop({
    //   title: '追加路径',
    //   description: '需要 vue-router，与`<router-link>`的`append`属性相同。如果为`true`，则在当前路径后追加`to`的路径。',
    //   setter: {
    //     concept: 'SwitchSetter',
    //   },
    // })
    // private append: nasl.core.Boolean = false;

    @Prop({
      group: '主要属性',
      title: '文本',
      description: '显示文本内容',
      docDescription: '显示的文本内容',
    })
    children: nasl.core.String;
    

    @Prop({
      group: '主要属性',
      title: '样式类型',
      description: '设置主题颜色和按钮样式类型',
      docDescription: '- 支持定义按钮样式，包括主要按钮、次要按钮、普通按钮、危险操作按钮和次要危险操作按钮。',
      setter: {
        concept: 'EnumSelectSetter',
        options: [{ title: '主要按钮' }, { title: '虚线按钮' }, { title: '普通按钮' }, { title: '文字' }, { title: '链接' }],
      },
    })
    type: 'primary' | 'dashed' | 'default' | 'text' | 'link' = 'default';

    // @Prop({
    //   group: '主要属性',
    //   title: '展示方式',
    //   description: '行内展示，或块级换行展示',
    //   docDescription: '控制展示方式，支持行内展示、块级展示（宽度会充满父元素）两种方式。',
    //   setter: {
    //     concept: 'EnumSelectSetter',
    //     options: [{ title: '行内展示' }, { title: '块级展示，宽度会充满父元素' }],
    //   },
    // })
    // display: 'inline' | 'block' = 'inline';

    @Prop({
      group: '主要属性',
      title: '图标',
      docDescription: '支持从图标库选择图标或上传自定义图标。',
      setter: {
        concept: 'IconSetter',
      },
    })
    icon: nasl.core.String = '';

    // @Prop({
    //   title: '图标位置',
    //   description: '设置图标居左或居右显示',
    //   setter: {
    //     concept: 'EnumSelectSetter',
    //     options: [{ title: '左' }, { title: '右' }],
    //   },
    // })
    // iconPosition: 'left' | 'right' = 'left';

    // @Prop({
    //   group: '交互属性',
    //   title: '链接类型',
    //   docDescription: '支持页面跳转、普通链接、下载链接。',
    //   bindHide: true,
    //   setter: {
    //     concept: 'EnumSelectSetter',
    //     options: [{ title: '页面跳转' }, { title: '下载链接' }],
    //   },
    // })
    // linkType: 'destination' | 'download' = 'destination';

    // @Prop({
    //   group: '交互属性',
    //   title: '链接地址',
    //   docDescription: '链接的详细地址。',
    // })
    // hrefAndTo: nasl.core.String;

    // @Prop({
    //   group: '交互属性',
    //   title: '链接打开方式',
    //   description: '链接跳转的打开方式，父级窗口和顶级窗口仅适用于iframe组件嵌套的情况，若不存在嵌套，则其打开方式同当前窗口。',
    //   docDescription: '可选新窗口、父级窗口、当前窗口和顶级窗口，其中父级窗口和顶级窗口仅适用于iframe组件嵌套的情况，若不存在嵌套，则打开方式同当前窗口。',
    //   setter: {
    //     concept: 'EnumSelectSetter',
    //     options: [{ title: '新窗口' }, { title: '当前窗口' }, { title: '父级窗口' }, { title: '顶级窗口' }],
    //   },
    // })
    // target: '_blank' | '_self' | '_parent' | '_top' = '_self';

    @Prop({
      group: '状态属性',
      title: '禁用',
      description: '置灰显示，且禁止任何交互（焦点、点击、选择、输入等）',
      docDescription: '置灰显示，且禁止任何交互（焦点、点击、选择、输入等）。',
      setter: {
        concept: 'SwitchSetter',
      },
    })
    disabled: nasl.core.Boolean = false;

    @Prop({
      group: '状态属性',
      title: '加载中触发条件',
      description: '设置加载中状态的触发条件',
      setter: {
        concept: 'SwitchSetter',
      },
    })
    private loading: nasl.core.Boolean = false;

    // @Prop({
    //   group: '样式属性',
    //   title: '显示虚线边框',
    //   description: '设置是否显示虚线边框',
    //   docDescription: '启用后，按钮边框变为虚线，默认关闭。',
    //   setter: {
    //     concept: 'SwitchSetter',
    //   },
    // })
    // dashed: nasl.core.Boolean = false;

    @Prop({
      group: '样式属性',
      title: '尺寸',
      description: '设置按钮大小',
      docDescription: '按钮尺寸，支持设置巨大、大、中型、正常、小、迷你。',
      setter: {
        concept: 'EnumSelectSetter',
        options: [{ title: '大' }, { title: '正常' }, { title: '小' }],
      },
    })
    size: 'large' | 'medium' | 'small' = 'medium';

    @Prop({
      group: '样式属性',
      title: '形状',
      description: '设置按钮形状',
      docDescription: '支持定义按钮形状，包括默认、方形、圆角、圆形四种。',
      setter: {
        concept: 'EnumSelectSetter',
        options: [{ title: '方形' }, { title: '圆角' }, { title: '圆形' }],
      },
    })
    shape: 'default' | 'round' | 'circle' = 'default';

    @Slot({
      title: 'undefined',
      description: '插入文本或 HTML。',
    })
    slotDefault: () => Array<ViewComponent>;

    @Event({
      title: '点击',
      description: '在元素上按下并释放任意鼠标按钮时触发。',
    })
    onClick: (event: {
      altKey: nasl.core.Boolean;
      button: nasl.core.Integer;
      clientX: nasl.core.Integer;
      clientY: nasl.core.Integer;
      ctrlKey: nasl.core.Boolean;
      metaKey: nasl.core.Boolean;
      movementX: nasl.core.Integer;
      movementY: nasl.core.Integer;
      offsetX: nasl.core.Integer;
      offsetY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      screenX: nasl.core.Integer;
      screenY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;

    @Event({
      title: '双击',
      description: '在元素上双击鼠标按钮时触发。',
    })
    onDoubleClick: (event: {
      altKey: nasl.core.Boolean;
      button: nasl.core.Integer;
      clientX: nasl.core.Integer;
      clientY: nasl.core.Integer;
      ctrlKey: nasl.core.Boolean;
      metaKey: nasl.core.Boolean;
      movementX: nasl.core.Integer;
      movementY: nasl.core.Integer;
      offsetX: nasl.core.Integer;
      offsetY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      screenX: nasl.core.Integer;
      screenY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;

    @Event({
      title: '右键点击',
      description: '在右键菜单显示前触发。',
    })
    onContextMenu: (event: {
      altKey: nasl.core.Boolean;
      button: nasl.core.Integer;
      clientX: nasl.core.Integer;
      clientY: nasl.core.Integer;
      ctrlKey: nasl.core.Boolean;
      metaKey: nasl.core.Boolean;
      movementX: nasl.core.Integer;
      movementY: nasl.core.Integer;
      offsetX: nasl.core.Integer;
      offsetY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      screenX: nasl.core.Integer;
      screenY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;

    @Event({
      title: '鼠标按下',
      description: '在元素上按下任意鼠标按钮时触发。',
    })
    onMouseDown: (event: {
      altKey: nasl.core.Boolean;
      button: nasl.core.Integer;
      clientX: nasl.core.Integer;
      clientY: nasl.core.Integer;
      ctrlKey: nasl.core.Boolean;
      metaKey: nasl.core.Boolean;
      movementX: nasl.core.Integer;
      movementY: nasl.core.Integer;
      offsetX: nasl.core.Integer;
      offsetY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      screenX: nasl.core.Integer;
      screenY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;

    @Event({
      title: '鼠标释放',
      description: '在元素上释放任意鼠标按钮时触发。',
    })
    onMouseUp: (event: {
      altKey: nasl.core.Boolean;
      button: nasl.core.Integer;
      clientX: nasl.core.Integer;
      clientY: nasl.core.Integer;
      ctrlKey: nasl.core.Boolean;
      metaKey: nasl.core.Boolean;
      movementX: nasl.core.Integer;
      movementY: nasl.core.Integer;
      offsetX: nasl.core.Integer;
      offsetY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      screenX: nasl.core.Integer;
      screenY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;

    @Event({
      title: '鼠标移入',
      description: '鼠标移入元素时触发。',
    })
    onMouseEnter: (event: {
      altKey: nasl.core.Boolean;
      button: nasl.core.Integer;
      clientX: nasl.core.Integer;
      clientY: nasl.core.Integer;
      ctrlKey: nasl.core.Boolean;
      metaKey: nasl.core.Boolean;
      movementX: nasl.core.Integer;
      movementY: nasl.core.Integer;
      offsetX: nasl.core.Integer;
      offsetY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      screenX: nasl.core.Integer;
      screenY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;

    @Event({
      title: '鼠标移出',
      description: '鼠标移出元素时触发。',
    })
    onMouseLeave: (event: {
      altKey: nasl.core.Boolean;
      button: nasl.core.Integer;
      clientX: nasl.core.Integer;
      clientY: nasl.core.Integer;
      ctrlKey: nasl.core.Boolean;
      metaKey: nasl.core.Boolean;
      movementX: nasl.core.Integer;
      movementY: nasl.core.Integer;
      offsetX: nasl.core.Integer;
      offsetY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      screenX: nasl.core.Integer;
      screenY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;

    @Event({
      title: '获得焦点',
      description: '获得焦点时触发。',
    })
    onFocus: (event: {
      cancelBubble: nasl.core.Boolean;
      detail: nasl.core.String;
      layerX: nasl.core.Integer;
      layerY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;

    @Event({
      title: '失去焦点',
      description: '失去焦点时触发。',
    })
    onBlur: (event: {
      cancelBubble: nasl.core.Boolean;
      detail: nasl.core.String;
      layerX: nasl.core.Integer;
      layerY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;

    // @Event({
    //   title: '切换路由前',
    //   description: '使用 router 相关属性切换路由前触发',
    // })
    // onBeforeNavigate: (event: { to: nasl.core.String; replace: nasl.core.Boolean; append: nasl.core.Boolean }) => any;

    // @Event({
    //   title: '切换路由后',
    //   description: '使用 router 相关属性切换路由后触发',
    // })
    // onNavigate: (event: { to: nasl.core.String; replace: nasl.core.Boolean; append: nasl.core.Boolean }) => any;
  }
}
